<!--
 * @Author: Bonnie
 * @Date: 2021-12-22 17:02:35
 * @LastEditTime: 2021-12-23 16:15:17
 * @LastEditors: Bonnie
 * @Description: 
 * @FilePath: /public_demo/src/views/JsSkill/index.vue
-->
<template>
  <div class="root-container skill-container">
    <el-collapse v-model="activeNames" accordion>
      <el-collapse-item title="1.可选链操作符" name="1">
        <page1 />
      </el-collapse-item>
      <el-collapse-item title="2.数值优雅取整" name="2">
        <page2 />
      </el-collapse-item>
      <el-collapse-item title="3.and的简写" name="3">
        <page3 />
      </el-collapse-item>
      <el-collapse-item title="4. ?? 与 ||" name="4">
        <page4 />
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script>
import page1 from "./page1";
import page2 from "./page2";
import page3 from "./page3";
import page4 from "./page4";
export default {
  name: "index",
  components: {
    page1,
    page2,
    page3,
    page4
  },
  data() {
    return {
      activeNames: ["4"]
    };
  }
};
</script>
<style lang='scss' scoped>
</style>
<style lang='scss'  >
.skill-container {
  .is-active {
    color: #8340ff;
  }
  .el-collapse-item__header {
    font-weight: bold;
    font-size: 24px;
  }
  .el-collapse-item__wrap {
    border-bottom: none;
  }
  .el-collapse-item__content {
    border: 1px solid #ebeef5;
    padding: 25px;
  }
}
</style>